<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xfm="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en" xmlns:instance="http://fake.com">
  <head>
    <title>FormFaces Tutorial:  ZERO Repeat Example</title>
    <link rel="StyleSheet" href="example.css" type="text/css" />
    <xfm:model schema="#mySchema" id="RepeatTest">
      <xfm:submission action="somewhere.do" indent="false" method="post" id="submitRepeat" />
      <xfm:instance>
        <instance:test>
          <instance:repeat>
            <instance:a />
            <instance:b />
            <instance:c />
            <instance:d />
          </instance:repeat>
          <instance:repeat>
            <instance:a />
            <instance:b />
            <instance:c />
            <instance:d />
          </instance:repeat>
        </instance:test>
      </xfm:instance>
    </xfm:model>

    <script type="text/javascript" src="../../../formfaces.js"></script>
  </head>
  <body class="basictext">
    <center>
      <span class="label"> This page shows the ability to insert and delete an element or group of
    elements dynamically.<br />
      </span>
    </center>
    <form id="submitRepeat"/>
    <center>
      <xfm:trigger id="triggerInsert" model="RepeatTest">
        <xfm:label>Insert</xfm:label>
        <xfm:insert nodeset="/instance:test/instance:repeat" at="index('repeatTest1')" position="after" id="rptInsert" ev:event="DOMActivate" model="RepeatTest"/>
      </xfm:trigger>
    </center>
    <br />
    <center>
      <xfm:repeat nodeset="/instance:test/instance:repeat" number="4" startindex="1" id="repeatTest1" height="400px" width="300px" model="RepeatTest">
        <center>
          <table border="1">
            <tr>
              <td>
                <table border="0">
                  <tr bgcolor="#faf8cc">
                    <td class="labelBold" align="center" colspan="2">Find a Book</td>
                  </tr>
                  <tr>
                    <td class="labelBold">
                      <xfm:input ref="instance:a" id="bookTitle" model="RepeatTest">
                        <xfm:label>Book Title:</xfm:label>
                      </xfm:input>
                    </td>
                  </tr>
                  <tr>
                    <td class="labelBold">
                      <xfm:select1 appearance="full" ref="instance:b" id="coverType" model="RepeatTest">
                        <xfm:label>Cover Type:</xfm:label>
                        <xfm:item>
                          <xfm:label>Hard Back</xfm:label>
                          <xfm:value>hardback</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Soft Back</xfm:label>
                          <xfm:value>softback</xfm:value>
                        </xfm:item>
                      </xfm:select1>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <xfm:input ref="instance:c" id="author" model="RepeatTest">
                        <xfm:label>Author:</xfm:label>
                      </xfm:input>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <xfm:select1 ref="instance:d" id="genreType" appearance="compact" model="RepeatTest">
                        <xfm:label>Genre:</xfm:label>
                        <xfm:item>
                          <xfm:label>History</xfm:label>
                          <xfm:value>history</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Mystery</xfm:label>
                          <xfm:value>mystery</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Romance</xfm:label>
                          <xfm:value>romance</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Biography's</xfm:label>
                          <xfm:value>biography</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Espionage</xfm:label>
                          <xfm:value>espionage</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Police</xfm:label>
                          <xfm:value>police</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Medical</xfm:label>
                          <xfm:value>medical</xfm:value>
                        </xfm:item>
                        <xfm:item>
                          <xfm:label>Humor</xfm:label>
                          <xfm:value>humor</xfm:value>
                        </xfm:item>
                      </xfm:select1>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </center>
      </xfm:repeat>
    </center>
		<center>
		  <xfm:trigger id="deleteButton" model="RepeatTest">
        <xfm:label>Delete</xfm:label>
        <xfm:delete nodeset="/instance:test/instance:repeat" at="index('repeatTest1')" id="rptDelete" ev:event="DOMActivate" />
      </xfm:trigger>
		</center>
    <!--page footer-->
    <br />
    <center>
      <span class="copyright">Copyright &#169; 2002-2004 Progeny Systems Corp. All Rights Reserved.</span>
    </center>
  </body>
</html>
